<template>
	<view>
		<!--  只在h5项目中编译,其他平台不编译 -->
		<!-- #ifdef H5 -->
			<view class="">
				H5页面功能
			</view>
		<!-- #endif -->
		
		<!-- #ifndef H5 -->
			<view class="">
				其他平台都有
			</view>
		<!-- #endif -->
		
		<!--测试js中条件编译 -->
		<view class="">
			<button type="primary" @click="handleClickFn">点击测试js编译</button>
		</view>
		<!-- 测试css的条件编译 -->
		<view class="testbox">
			测试样式
		</view>
		<!-- 测试pages.json 文件的条件编译 -->
		<view class="box">
			<button @click='gotodetailFn'>点击跳转到详情页</button>
		</view>
	</view>
</template>

<script>
	// 如果设置了条件编译, 那么只能在对应的平台打包编译,例如 H5. 最后打包成生产包的时候,
	// 就会打包到H5的生产包中去, 代码就不会打包到其他平台的代码包中去
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			handleClickFn(){
				// #ifdef H5
					alert('我是H5功能')
				// #endif
				// #ifdef MP-WEIXIN
					console.log('我是小程序代码')
				// #endif
				
			},
			gotodetailFn(){
				uni.navigateTo({
					url:'/pages/detail/detail'
				})
			}
		}
	}
</script>

<style scoped>
	/* #ifdef MP-WEIXIN */
	/* 	.testbox{
			width: 200rpx;
			height: 200rpx;
			background-color: red;
		} */
	/* #endif */
	
	.testbox{
		width: 200rpx;
		height: 200rpx;
		/* #ifdef H5 */
			background-color: green;
		/* #endif */
		/* #ifdef MP-WEIXIN */
			background-color: deeppink;
		/* #endif */
		
	}
			
	

</style>
